<template>
	<view class="container">
		<view class="content">
			<view class="title">猜你想问</view>
			<view class="list">
				<view class="item" v-for="(item,index) in QAList" :key="index" @click="toAnswer(item)">
					<view>{{ item.title }}</view>
					<uni-icons type="right" color="#333"></uni-icons>
				</view>
			</view>
			<!-- <view class="change" @click="onChangeHandle">
				<image :class="{ loop: isLoop }" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/ec575db0-2ab0-44f6-85f9-7327bed71ae1.png"></image>
				<view>换一换</view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { $getQAList } from '@/http/apiManager.js'
	
	onLoad(() => {
		getQAList()
	})
	
	const QAList = ref([])
	const currentQuestionGroup = ref(0)
	
	// 获取qa列表
	async function getQAList(){
		uni.showLoading({ title: '加载中...'})
		const { bizData } = await $getQAList()
		// 将问题分为二维数组 5个问题为一组
		/* const chunkSize = 5;
		const groupedArray = [];
		for (let i = 0; i < bizData.length; i += chunkSize) {
			groupedArray.push(bizData.slice(i, i + chunkSize));
		}
		QAList.value = groupedArray; */
		QAList.value = bizData
		uni.hideLoading()
	}
	
	// 跳转问题详情页
	function toAnswer(qa){
		uni.navigateTo({
			url: `/pageUser/setting/serviceCenter/answer?question=${qa.title}&answer=${encodeURIComponent(qa.content)}`
		})
	}
	
	const isLoop = ref(false)
	// 切换问题处理
	function onChangeHandle(){
		if(isLoop.value) return
		// 按钮旋转
		isLoop.value = true
		// 总问题5个分为一组 进行切换
		if(currentQuestionGroup.value + 1 < QAList.value.length){	// 下一组问题
			currentQuestionGroup.value += 1
		}else{	// 重置
			currentQuestionGroup.value = 0
		}
		// 1秒后去除动画
		setTimeout(() => {
			isLoop.value = false
		},1000)
	}
	
</script>

<style lang="less" scoped>
	.loop{
		animation-duration: 1s;
		animation-name: loop;
	}
	@keyframes loop {
		from {
			rotate: 0;
		}
	
		to {
			rotate: 360deg;
		}
	}
	.container{
		width: 100%;
		min-height: 100vh;
		background: #f9f9f9;
		padding: 24rpx;
		box-sizing: border-box;
		position: relative;
		
		.content{
			background: #fff;
			border-radius: 25rpx;
			.title{
				position: relative;
				padding: 24rpx;
				font-weight: bold;
				font-size: 32rpx;
				box-shadow: 0 0 1rpx #eee;
				&:before{
					content: '';
					display: block;
					position: absolute;
					width: 4em;
					height: 10rpx;
					background: linear-gradient(to right, #31d19b, rgba(255,255,255,0));
					left: 24rpx;
					bottom: 24rpx;
					opacity: 0.2;
				}
			}
			
			.list{
				.item{
					padding: 15rpx 24rpx;
					display: flex;
					align-items: center;
					color: #666;
					box-shadow: 0 0 1rpx #eee;
					&>view{
						flex-grow: 1;
					}
				}
				
			}
			
			.change{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 24rpx;
				gap: 10rpx;
				color: #a5a5a5;
				font-size: 0;
				image{
					width: 32rpx;
					height: 32rpx;
				}
				view{
					font-size: 28rpx;
				}
			}
		}
	}
</style>